<template>
	<view>
		<view class="tab_nav">
			<nav-bar
				nav_btn="back"
				:index="index"
				:title="title"
				@onPicker="onPicker"
				:showPicker="showPicker"
				:color="color"
				:placeholder="placeholder"
				:list="list"
				:auto_img="image"
				:background="background"
			></nav-bar>
		</view>
		<view class="header_box w100">
			<view class="nav_list_box flex">
				<view class="auto_box" v-for="(item, index) in navList" :key="index" @click="onNav(index)">
					<view :class="['nav_list', { nav_list_active: navListIndex == index }]">
						{{ item.name }}
					</view>
					<view class="auto_xian" v-if="navListIndex == index"></view>
				</view>
			</view>
		</view>
		<view style="height: 20rpx; background: #f3f3f3"></view>
		<template v-if="navListIndex == 0">
			<view class="searchbox">
				<view class="searchWrap">
					<view class="search">
						<image src="static/10.png"></image>
					</view>
					<input style="flex: 1" v-model="keyword" @input="search" placeholder="搜索" placeholder-style="font-size: 24rpx" type="text" />
				</view>
			</view>
			<!-- 合伙人审批 -->
			<view @click="goReview" class="flex align-center justify-between block">
				<view class="flex align-center">
					<view class="pic" style="">
						<image style="" src="static/11.png"></image>
					</view>
					<view class="label" style="">店铺合伙人审批</view>
				</view>
				<view class="flex align-center">
					<view class="flex align-center justify-center num" v-if="num > 0">
						{{ num }}
					</view>
					<view style="font-size: 0">
						<image style="width: 44rpx; height: 44rpx" src="static/12.png"></image>
					</view>
				</view>
			</view>
			<!-- 我的团队列表 -->
			<view v-if="teamList.length == 0" class="empty" style="">暂无数据!</view>
			<view class="list" v-for="(item, index) in teamList" :key="index" style="">
				<view class="top">
					<view class="head">
						<image class="pic" :src="item.userinfo.avatar"></image>
						<view class="name">{{ item.userinfo.name || item.userinfo.nickname }}</view>
					</view>
					<view class="mobile">
						{{ item.userinfo.mobile }}
						<image @click="call(item.userinfo.mobile)" class="call" src="static/13.png"></image>
					</view>
				</view>
				<view class="msg">
					<view class="label" v-if="item.is_apply">自主申请</view>
					<view class="label" v-else>{{ item.puserinfo.name || item.puserinfo.nickname }}邀请</view>
					<view class="label">邀请时间：{{ get_datesForDian(item.createtime) }}</view>
				</view>
				<view class="msg">
					<view class="label">审核人：{{ item.audituserinfo.name || item.audituserinfo.nickname }}</view>
					<view class="label">审核时间：{{ get_datesForDian(item.audit_time) }}</view>
				</view>
			</view>
			<view v-if="teamList.length != 0" style="font-size: 26rpx; font-weight: 500; color: #666; text-align: center; padding-top: 64rpx; padding-bottom: 34rpx">到底了哦~</view>
		</template>
		<!-- 成交记录列表 -->
		<template v-if="navListIndex == 1">
			<view v-if="recordList.length == 0" class="empty">暂无数据!</view>
			<view v-for="(item, index) in recordList" :key="index" style="margin-bottom: 20rpx; background: #fff; border-radius: 16rpx; padding: 36rpx 32rpx 32rpx 32rpx">
				<view class="flex align-center">
					<view style="width: 6rpx; height: 32rpx; background: #ebbe87; margin-right: 16rpx"></view>
					<view style="font-size: 32rpx; font-weight: 500; color: #ebbe87">订单人 {{ item.buy_username }}</view>
				</view>
				<view class="flex align-center justify-between" style="margin-top: 24rpx; margin-bottom: 18rpx">
					<view class="flex-1" style="font-weight: 700; color: #333333; font-size: 32rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
						{{ item.shop_name }}
					</view>
					<view style="margin-left: 130rpx; font-size: 32rpx; font-weight: 600; color: #333333">￥{{ item.price }}</view>
				</view>
				<view class="flex align-center justify-between">
					<view class="flex align-center flex-1" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
						<view style="font-size: 0; margin-right: 2rpx">
							<image style="width: 34rpx; height: 34rpx; border-radius: 50%" :src="'https://sz.vvv5g.com' + item.shop_img"></image>
						</view>
						<view style="font-size: 24rpx; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
							{{ item.good_name }}
						</view>
					</view>
					<view class="flex align-center" style="font-size: 24rpx; color: #999; margin-left: 10rpx">
						{{ item.createtime }}
					</view>
				</view>
				<view class="flex align-center justify-between" style="padding-top: 30rpx; border-top: 2px solid #efefef; margin-top: 32rpx">
					<view style="font-weight: 700; color: #666; font-size: 28rpx">推荐人/{{ item.user_username }}</view>
					<view style="font-weight: 700; color: #666; font-size: 28rpx">
						返利/
						<span style="color: #ff3f4a">￥{{ item.money }}</span>
					</view>
				</view>
			</view>
			<view v-if="recordList.length != 0" style="font-size: 26rpx; font-weight: 500; color: #666; text-align: center; padding-top: 64rpx; padding-bottom: 34rpx">到底了哦~</view>
		</template>
		<!-- 排行榜列表 -->
		<template v-if="navListIndex == 2">
			<view class="flex align-center justify-between" style="padding: 32rpx 32rpx 0 32rpx; background: #fff; border-radius: 16rpx 16rpx 0rpx 0rpx">
				<view class="flex align-center">
					<view
						@click="changeRankIndex(0)"
						class="flex align-center justify-center"
						:style="rankIndex == 0 ? 'background: linear-gradient(154deg, #E4B77F 0%, #CD9C61 100%);color: #fff;' : 'border: 1px solid #CBCBCB;color: #999;'"
						style="width: 96rpx; height: 44rpx; font-size: 24rpx; font-weight: 500"
					>
						成交数
					</view>
					<view
						@click="changeRankIndex(1)"
						class="flex align-center justify-center"
						:style="rankIndex == 1 ? 'background: linear-gradient(154deg, #E4B77F 0%, #CD9C61 100%);color: #fff;' : 'border: 1px solid #CBCBCB;color: #999;'"
						style="width: 116rpx; height: 42rpx; font-size: 24rpx; font-weight: 500; margin-left: 24rpx"
					>
						返利金额
					</view>
				</view>
				<view class="flex align-center" @click="clickTime">
					<view style="font-size: 24rpx; font-weight: 500; color: #999">当前年度({{ year }})</view>
					<view style="font-size: 0; margin-left: 12rpx">
						<image style="width: 12rpx; height: 18rpx" src="./static/14.png"></image>
					</view>
				</view>
			</view>
			<view v-if="rankList.length == 0" style="font-size: 26rpx; color: #999; text-align: center; padding-top: 30rpx">暂无数据!</view>
			<view class="flex align-center" style="padding: 0 33rpx; background: #fff" v-for="(item, index) in rankList" :key="index">
				<view style="font-size: 0; margin-right: 16rpx">
					<image style="width: 72rpx; height: 72rpx; border-radius: 50%" :src="item.user.avatar"></image>
				</view>
				<view class="flex align-center justify-between flex-1" style="border-bottom: 2px solid #efefef">
					<view class="flex flex-clum justify-between" style="padding: 33rpx 0; height: 72rpx">
						<view style="font-size: 30rpx; font-weight: 700; color: #333333">
							{{ item.user.name }}
						</view>
						<view style="font-size: 24rpx; color: #666">第{{ index + 1 }}名</view>
					</view>
					<view style="color: #333333; font-size: 30rpx; font-weight: 700; height: 72rpx">
						{{ rankIndex == 0 ? item.num + '单' : '￥' + item.moneys }}
					</view>
				</view>
			</view>
			<view v-if="rankList.length != 0" style="font-size: 26rpx; font-weight: 500; color: #666; text-align: center; padding-top: 64rpx; padding-bottom: 34rpx">到底了哦~</view>
		</template>
		<uni-popup ref="popup">
			<view style="background: linear-gradient(180deg, #fff7ea 0%, rgba(255, 255, 255, 0) 100%); border-radius: 32rpx 32rpx 0rpx 0rpx; padding-top: 32rpx">
				<view style="font-size: 0; margin-left: 32rpx" @click="close">
					<image style="width: 26rpx; height: 26rpx" src="./static/15.png"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 178rpx">
					<view
						@click="clickYearList(item)"
						class="flex align-center justify-center"
						v-for="(item, index) in dateList"
						:key="index"
						:style="year == item ? 'background: linear-gradient(86deg, rgba(237,237,237,0) 0%, #EDEDED 54%, rgba(237,237,237,0) 100%);' : ''"
						style="height: 88rpx; color: #111111; font-size: 30rpx"
					>
						{{ item }}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			image: '../static/tab_jian.png',
			color: 'black',
			showPicker: true,
			background: '#fff',
			list: [
				{
					shopname: '请选择店铺'
				}
			],
			shopId: 0,
			index: 0,
			navList: [
				{
					name: '店铺合伙人'
				},
				{
					name: '成交记录'
				},
				{
					name: '排行榜'
				}
			],
			navListIndex: 0,
			keyword: '',
			teamList: [],
			recordList: [], //成交记录
			rankList: [], //排行榜列表
			year: 2022,
			rankIndex: 0,
			page: 1,
			lastPage: 0,
			dateList: [],
			num: 0
		};
	},
	onLoad(options) {
		let obj = JSON.parse(options.obj);
		this.shopId = obj.shopId;
		this.index = obj.index;
		this.getShopList();
		this.getNotice();
	},
	onShow() {
		this.getMyTeamList();
	},
	onReachBottom() {
		if (this.page < this.lastPage) {
			this.page++;
			if (this.navListIndex == 1) {
				this.getRecordList();
			} else if (this.navListIndex == 2) {
				this.getRankList();
			} else {
				this.getMyTeamList();
			}
		} else {
			this.$wanlshop.msg('我是有底线的');
		}
	},
	methods: {
		// 获取消息来判断是否显示消息提示
		getNotice() {
			this.$request({
				url: 'manage/getnotice',
				method: 'post',
				data: {
					shop_id: this.shopId,
					type: 'shop_partner'
				}
			}).then((res) => {
				const { code, data } = res.data;
				if (code == 1) {
					this.num = data.shop_partner;
				}
			});
		},
		goReview() {
			uni.navigateTo({
				url: '/pages/schedule/partnerReview?shop_id=' + this.shopId
			});
		},
		// 打开弹窗
		clickTime() {
			this.$refs.popup.open('bottom');
		},
		// 关闭弹窗
		close() {
			this.$refs.popup.close();
		},
		clickYearList(e) {
			this.year = e;
			this.$refs.popup.close();
			this.page = 1;
			this.getRankList();
		},
		changeRankIndex(e) {
			this.rankIndex = e;
			this.page = 1;
			this.getRankList();
		},
		//拨打电话
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e, //仅为示例
				success: (res) => {},
				fail: (res) => {}
			});
		},
		//店铺合伙人列表
		getMyTeamList() {
			uni.showLoading({
				title: '数据请求中···'
			});
			this.$request({
				url: 'partners/sh_list',
				method: 'POST',
				data: {
					keyword: this.keyword,
					shop_id: this.shopId,
					page: this.page,
					type: 2
				}
			}).then((res) => {
				const { code, data, msg } = res.data;
				if (code == 1) {
					data?.data.map((item) => {
						item.userinfo.mobile = item?.userinfo?.mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3');
					});
					this.teamList = data?.data;
					this.lastPage = data.last_page;
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					});
				}
				uni.hideLoading();
			});
		},
		//成交记录列表
		getRecordList() {
			this.$request({
				url: 'partners/rebate',
				method: 'POST',
				data: {
					keyword: '',
					page: this.page,
					shop_id: this.shopId
				}
			}).then((res) => {
				if (this.page == 1) {
					this.recordList = res.data.data.data;
				} else {
					this.recordList.push(...res.data.data.data);
				}
				this.lastPage = res.data.data.last_page;
			});
		},
		//排行榜列表
		getRankList() {
			this.$request({
				url: 'partners/num_paihang',
				method: 'POST',
				data: {
					time: '',
					type: this.rankIndex,
					page: this.page
				}
			}).then((res) => {
				if (this.page == 1) {
					this.rankList = res.data.data.data;
				} else {
					this.rankList.push(...res.data.data.data);
				}
				this.lastPage = res.data.data.last_page;
			});
		},
		//搜索
		search() {
			this.getMyTeamList();
		},
		//获取店铺列表
		getShopList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: '',
					type: 1
				}
			}).then((res) => {
				this.list = res.data.data;
			});
		},
		// 选择店铺
		onPicker(e) {
			this.shopId = this.list[e].id;
			this.index = e;
			this.getMyTeamList();
		},
		onNav(ind) {
			this.navListIndex = ind;
			if (this.navListIndex == 0) {
				// 我的团队列表
				this.getMyTeamList();
			} else if (this.navListIndex == 1) {
				// 成交记录
				this.page = 1;
				this.getRecordList();
			} else {
				//排行榜
				this.page = 1;
				this.getDateList();
				this.getRankList();
			}
		},
		getDateList() {
			let a = 1970;
			for (let i = 0; i < 100; i++) {
				this.dateList.push(a + i);
			}
		}
	}
};
</script>
<style>
page {
	background: #f4f5f9;
}
</style>
<style scoped lang="scss">
.tab_nav {
	background-color: #fff;
}

// 导航栏样式
.header_box {
	height: 100upx;

	.nav_list_box {
		background: #fff;

		.auto_box {
			margin-left: 94upx;
			text-align: center;

			.nav_list {
				color: #666;
				line-height: 100upx;
				font-size: 32rpx;
			}

			.nav_list_active {
				color: #000;
				font-weight: bold;
			}

			.auto_xian {
				width: 55upx;
				height: 6upx;
				background-color: #000000;
				margin: -8upx auto;
			}
		}
	}
}
.searchbox {
	width: 750rpx;
	height: 88rpx;
	background: #fff;
	padding-top: 20rpx;
	.searchWrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #f3f3f3;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 14rpx 0;
		margin: 0 32rpx;
	}
	.search {
		font-size: 0;
		margin-left: 24rpx;
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}
.block {
	padding: 20rpx 34rpx;
	border-bottom: 2rpx solid #f2f2f2;
	background: #fff;
	.pic {
		font-size: 0;
		margin-right: 20rpx;
		image {
			width: 84rpx;
			height: 84rpx;
		}
	}
	.label {
		font-weight: 500;
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
	}
	.num {
		width: 44rpx;
		height: 44rpx;
		background: #e92727;
		border-radius: 22rpx;
		font-weight: 500;
		color: #fff;
		font-size: 28rpx;
	}
}
.empty {
	font-size: 26rpx;
	color: #999;
	text-align: center;
	padding-top: 30rpx;
}
.list {
	padding: 20rpx 32rpx;
	border-bottom: 2rpx solid #f2f2f2;
	background: #fff;
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pic {
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
	}
	.name {
		padding-left: 20rpx;
		font-weight: 500;
		color: #333;
		font-size: 30rpx;
	}
	.mobile {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #333;
	}
	.call {
		width: 36rpx;
		height: 36rpx;
	}
	.msg {
		display: flex;
		justify-content: space-between;
		padding-left: 104rpx;
		& + .msg {
			padding-top: 10rpx;
		}
		.label {
			font-size: 24rpx;
			color: #888;
		}
	}
}
</style>
